import React,{Component} from 'react';
import api from '../../../api/index'
import 'antd/dist/antd.css'
import { Carousel } from 'antd';
import './style.css'



class Swiper extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             banners:[]
        }
    }
    
    componentDidMount(){
        api.getBanner().then(res=>{
            // console.log(res.data.banners);
            let banner = res.data.banners.splice(0,8)
            this.setState({
                banners:banner
            })
        })
    }
    
        render(){
            console.log('轮播图渲染数据',this.state.banners);
            return (
                <div>
                    <div className="swiper">
                            <Carousel autoplay>
                                {
                                    this.state.banners.map((v,i)=>{
                                        return (<div key={i}>   
                                        <img src={v.pic} alt="" />
                                    </div>)
                                    })
                                }
                            </Carousel>
                    </div>
                </div>
            );
        }

}

export default Swiper;